<template>
    <div class="container">
        <div class="welcome">
            <div class="left-msg">
                <img class="welcome-avatar" :src="$store.state.avatar" />
                <div>
                    <div class="welcome-text">
                        你好，{{ $store.state.companyName }}
                    </div>
                    <div class="fc-6B6B86">{{ accountProductStatus.account.accountExpireTime ?? '------' }}到期</div>
                </div>
            </div>
            <div class="fc-6B6B86">{{nowDate}}更新</div>
        </div>
        <div class="card bg1 mg-b-20">
            <div class="card-l">
                <div class="innerCard innerCardbg1">
                    <div class="innermsg">
                        <div class="fs-18 bold">微信账户余额</div>
                        <i class="bold fs-30">¥{{ accountProductStatus.pay.balance }}</i>
                    </div>
                    <img class="iconimg" src="../assets/home/wechatIcon.png" alt="">
                </div>
                <img class="arrowimg" src="../assets/home/arrowCard.png" alt="">
                <div class="msgbox">
                    <div class="title">用户资产</div>
                    <div class="msginfo">
                        <div class="msgitem">
                            <div class="flex-ai-c flex gap-10">可发金额
                                <img src="../assets/home/questionMark.png" class="questIcon" alt="">
                            </div>
                            <div class="fs-22 bold">¥ {{ accountProductStatus.pay.canUseBalance }}</div>
                        </div>
                        <div class="msgitem">
                            <div>待领金额</div>
                            <div class="fs-22 bold">¥ {{ accountProductStatus.pay.unclaimedSalary }}</div>
                        </div>
                        <div class="msgitem">
                            <div>预支待领</div>
                            <div class="fs-22 bold">¥ {{ accountProductStatus.pay.advanceUnclaimedSalary }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-r">
                <img class="w-50-h-17" src="../assets/home/wechatbg.png" alt="">
                <div class="btn btnbg1" @click="onWechatRecharge">充值</div>
            </div>
        </div>
        <div class="card bg2">
            <div class="card-l">
                <div class="innerCard innerCardbg2">
                    <div class="innermsg">
                        <div class="fs-18 bold">支付宝账户余额</div>
                        <i class="bold fs-30">¥{{ accountProductStatus.alipay.balance }}</i>
                    </div>
                    <img class="iconimg" src="../assets/home/alipayIcon.png" alt="">
                </div>
                <img class="arrowimg" src="../assets/home/arrowCard.png" alt="">
                <div class="msgbox">
                    <div class="title">用户资产</div>
                    <div class="msginfo">
                        <div class="msgitem">
                            <div class="flex-ai-c flex gap-10">可发金额
                                <img src="../assets/home/questionMark.png" class="questIcon" alt="">
                            </div>
                            <div class="fs-22 bold">¥ {{ accountProductStatus.alipay.canUseBalance }}</div>
                        </div>
                        <div class="msgitem">
                            <div>待领金额</div>
                            <div class="fs-22 bold">¥ {{ accountProductStatus.alipay.unclaimedSalary }}</div>
                        </div>
                        <div class="msgitem">
                            <div>预支待领</div>
                            <div class="fs-22 bold">¥ {{ accountProductStatus.alipay.advanceUnclaimedSalary }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-r">
                <img class="w-50-h-17" src="../assets/home/alipaybg.png" alt="">
                <div class="btn btnbg2" @click="onShowDia">充值</div>
            </div>
        </div>
        <alipayRechargeDialog v-model:show="isShow" :num="accountProductStatus.alipay.balance"></alipayRechargeDialog>
        <wechatRechargeDialog v-model:show="isShowwechat"></wechatRechargeDialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import store from '@/store'
import alipayRechargeDialog from '@/components/alipay-recharge-dialog/alipay-recharge-dialog.vue'
import wechatRechargeDialog from '@/components/wechat-recharge-dialog/wechat-recharge-dialog.vue'
import { AccountProductStatusDto, getAccountProductStatusApi } from '@/api/alipay-recharge'
import dayjs from 'dayjs'
export default defineComponent({
    name: 'AccountDetails',
    components: { alipayRechargeDialog, wechatRechargeDialog },

    data() {
        return {
            nowDate: '',
            accountProductStatus: {} as AccountProductStatusDto,
            isShow: false,
            isShowwechat: false,
            $store: store
        }
    },
    async created() {
        this.nowDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
        let res = await getAccountProductStatusApi()
        this.accountProductStatus = res
    },
    methods: {
        /**
         * 支付宝充值弹窗
         */
        onShowDia() {
            this.isShow = true
        },
        /**
         * 微信充值
         */
        onWechatRecharge() {
            console.log(11)
            this.isShowwechat = true
        }
    }
})
</script>
<style lang="stylus" scoped>
.questIcon
    width 14px
    height 14px
.msgbox
    display flex
    flex-direction column
    gap 12px
    flex 1
    .title
        font-size 16px
        font-weight 600
        color #6B6B86
    .msginfo
        display flex
        align-items center
        .msgitem
            flex 1

.arrowimg
    width 40px
    height 136px
    margin-right 35px
.card-l
    flex 1
    display flex
    align-items center

.innerCardbg1
    background: linear-gradient(110deg, #88D189 0%, #14A84D 73%);
.innerCardbg2
    background: linear-gradient(110deg, #80A9F7 0%, #3E79F5 100%);

.innerCard
    width 312px
    margin-right 28px

    height 120px
    border-radius 12px
    padding-left 20px
    padding-right 16px
    display flex
    align-items center
    justify-content space-between
    color #FFFFFF
    .innermsg
        display flex
        align-self center
        flex-direction column
        gap 12px

    .iconimg
        width 50px
        height 50px

.card-r
    display flex
    flex-direction column
    align-items center
    gap 32px
.btnbg1
    background: #00D679;
.btnbg2
    background: #1989FA;
.btn
    width 56px
    height 32px
    border-radius 4px
    color #FFFFFF
    font-size 16px
    display flex
    align-items center
    justify-content center

.w-50-h-17
    width 50px
    height 17px
.bg1
    background: linear-gradient(180deg, #E5FAF4 0%, #FFFFFF 42%);
.bg2
    background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 42%);
.card
    width 100%
    box-sizing border-box;
    min-height 152px;
    border-radius 12px;
    padding 0 20px;
    display flex
    align-items center
    justify-content space-between

.container
    width: 100%;
    box-sizing border-box;

.welcome
    display flex
    align-items center
    justify-content space-between
    width 100%
    padding 20px 20px 0 20px
    box-sizing border-box
    margin-bottom 20px
.welcome-avatar
    width 57px
    height 57px
    border-radius 50%
    margin-right 20px
.welcome-text
    font-size 18px
    color #333333
    font-weight 700
    margin-bottom 10px

.left-msg
    display flex
    align-items center
.fc-6B6B86
    color #6B6B86
    font-size 14px
</style>
